<template>
  <div>
    <p style="color: white">1</p>
    <van-nav-bar
      :fixed="true"
      title="购物车"
      left-text="返回"
      @click-left="onClickLeft"
      left-arrow
    />
    <van-card
      :price="2499.00"
      desc="IOS7 6+64GB 平板电脑 苹果"
      title="iPad mini"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #footer>
        <van-stepper v-model="value" min="1" max="5"/>
        <van-checkbox v-model="checked" shape="square" style="margin-top: -24px">{{ checked ? '选中' : '未选中' }}
        </van-checkbox>
      </template>
    </van-card>
    <!--为了让最后一个商品不被遮挡-->
    <div>
      <p style="color: white">1</p>
      <p style="color: white">1</p>
    </div>
    <van-submit-bar v-bind:price="calculateTotal" button-text="提交订单"/>
  </div>
</template>

<script>
export default {
  name: "shoppingCart",
  data() {
    return {
      active: 'shoppingCart',
      value: 1,
      checked: true,
      price: 2499,
      total: 249900,
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    }
  },
  computed: {
    calculateTotal: function () {
      return this.value * this.price * 100;
    }
  }
}
</script>

<style scoped>

</style>
